Vue.js Quick Start Guide by Ajdin Imsirovic

Author:Ajdin Imsirovic
Language: eng
Format: epub
Tags: COM051260 - COMPUTERS / Programming Languages / JavaScript, COM060080 - COMPUTERS / Web / General, COM060160 - COMPUTERS / Web / Web Programming
Publisher: Packt Publishing
Published: 2018-10-25T09:52:22+00:00

Chaining filters in Vue

The requirements for our app have been updated, and now we need to show some additional, nicely formatted data on the screen.

Since the requirements have changed, we also need to update the data.

The code for this section is available at this pen: https://codepen.io/AjdinImsirovic/pen/BOOazy.

This is the updated JavaScript. To begin, we'll add the el and data options:

new Vue({

el: "#app",

data() {

return {

firstName: "JANE",

lastName: "DOE",

yearOfStudy: 1,

points: 84.44,

additionalPoints: 8

}

},

Still in JS, we'll add the filters:

filters: {

pointsRoundedUp(points){

return Math.ceil(parseFloat(points));

},

pointsToGrade(points){

if(points>90) {

return "A"

}

else if(points>80 && points<=90) {

return "B"

}

else if(points>70 && points<=80) {

return "C"

}

else if(points>60 && points<=70) {

return "D"

}

else if(points>50 && points<=60) {

return "E"

}

else {

return "F"

}

},

yearNumberToWord(yearOfStudy){

// freshman 1, sophomore 2, junior 3, senior 4

if(yearOfStudy==1) {

return "freshman"

} else if(yearOfStudy==2){

return "sophomore"

} else if(yearOfStudy==3){

return "junior"

} else if(yearOfStudy==4){

return "senior"

} else {

return "unknown"

}

},

firstAndLastName(firstName, lastName){

return lastName + ", " + firstName

},

toLowerCase(value){

return value.toLowerCase()

},

capitalizeFirstLetter(string) {

return string.charAt(0).toUpperCase() + string.slice(1);

}

}

});

The updated HTML looks like this:

<div id="app">

<h1>A simple grade-rounding Vue app</h1>

<p>Points from test: {{ points }}</p>

<p>Rounded points are: {{ points | pointsRoundedUp }}</p>

<p>Student info:

<!--

<p>Name: {{ firstName, lastName | firstAndLastName | toLowerCase | capitalizeFirstLetter}}</p>

-->

<p>

Name:

{{ lastName | toLowerCase | capitalizeFirstLetter }},

{{ firstName | toLowerCase | capitalizeFirstLetter }}

</p>

<p>Year of study: {{ yearOfStudy | yearNumberToWord }}</p>

<p>Final grade: <strong>{{ points | pointsToGrade }}</strong></p>

</div>

With these chained filters, we achieved the correct formatting of the student's name by virtue of taking the data (which appeared in all CAPS) and piping it through two filters: toLowerCase and capitalizeFirstLetter.

We can also see a commented-out paragraph that shows an unsuccessful approach that capitalizes only the first letter of the last name, but not the first letter of the first name. The reason for this is the firstAndLastName filter which, when applied, combines the full name into a single string.

Note that filters are not cached, which means that they will be always run, just like methods.

For more information on filters, refer to the official documentation at https://vuejs.org/v2/guide/filters.html.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.